
<script setup >
//导入
import { ref } from 'vue'
import sonCom from './son-com.vue'

//定义属性
const money = ref(100);

//父组件增加金额
const incMoney = () =>{
  money.value += 10;
}

//子组件减少金额
const decMoney = (val) =>{
  money.value -= val;
}

function sonToFather(val){
  console.log(`子给父传递的值是${val}`);
  money.value -= val;
}
</script>
<template>
    <div class="son">
      <h3 class="tit">
        <button @click="incMoney" class="defaultButton">+ 增加金额</button>
        <button @click="decMoney(20)" class="defaultButton">- 减少金额</button>
      </h3>
      {{ money }}

      <!--子组件-->
      <sonCom :fmoney="money" @giveMoney="sonToFather"></sonCom>

     </div>
    </template>
    <style scoped>
    .con{
      width: 600px;
      padding: 30px;
      border: 1px solid #c0c0c0;
      border-radius: 12px;
      background: rgb(219, 215, 228);
    }
    .tit{
      padding-bottom: 10px;
    }
    :deep(.defaultButton){
        background: rgb(237, 241, 251);
        border: 1px solid rgb(207, 195, 250);
        width: 80px;
        height: 30px;
        border-radius: 4px;
        cursor: pointer;
    
    }
    .defaultButton:active,.defaultButton:visited,.defaultButton:focus{
      background: rgb(237, 241, 251);
    }
    </style>
